<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>WeUI</title>
    <link rel="stylesheet" href="./WeUI_files/weui.css">
    <link rel="stylesheet" href="./WeUI_files/example.css">
    <script type="text/javascript" src="./WeUI_files/zepto.min.js"></script>
    <style type="text/css">
        .anniu:hover {
            background-color: #313131;
        }
        .picli {
            background: no-repeat center center;
            background-size: cover;
            width: 24.3vw;
            height: 24.7vw;
            float: left;
            margin: 2px;            
        }
        /* css判断只有一个图片的情况 */
        .picli:nth-last-child(1):first-child {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left;
            width: 77vw;
            height: 40vw;
            float: left;
            margin: 2px;     
        }

        .textarea {
            border-radius: 1.5vw;
            min-height: 7vw;
            width: 17.5em;
            margin-right: 2vw;
            font-size: 1.2em;
            margin-left: 3vw;
            overflow-x: hidden;
            overflow-y: auto;
            max-height: 4em;
            background-color: #ffffff;
            padding-left: 0.5em;
            padding-top: 2vw;
            line-height: 6vw;
        }

        .textarea:empty:before{ 
            content: '评论'; 
            color: gray; 
        } 


    </style>
</head>

<body style="
    font-size: 3.5vw;
">

    <div style="
    background-color: #eeeeee;
    position: fixed;
    height: 13vw;
    width: 100%;
    z-index: 1;
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    line-height: 15vw;
"><span>朋友圈</span>
        <!-- <div style="
top: 4vw;
left: 4vw;
position: fixed;
background-color: #cccccc;
width: 14vw;
height: 7vw;
border-radius: 1.5vw;
transform-origin: 0px 0px;
opacity: 1;
transform: scale(1, 1);
font-size: 4vw;
font-weight: bolder;
text-align: center;
line-height: 7vw;
" onclick="quit(this,1);">退出</div> -->
        <div id="fapengyouquandiv" style="
    top: 4vw;
    right: 4vw;
    position: fixed;
    background-color: #cccccc;
    width: 20vw;
    height: 7vw;
    border-radius: 1.5vw;
    transform-origin: 0px 0px;
    opacity: 1;
    transform: scale(1, 1);
    font-size: 4vw;
    font-weight: bolder;
    text-align: center;
    line-height: 7vw;
" onclick="fapengyouquan(this,1);">发朋友圈</div>
    </div>

    <div style="
    background-color: #989797;
    padding-bottom: 79vw;
">
        <!-- 开始那个背景图 -->


    </div>

    <div style="
    position: relative;
    background-color: red;
    width: 16%;
    top: -7vw;
    right: 23%;
    float: right;
    text-align: end;
    height: 5vw;
">
        温温
    </div>
    <div style="
    position: relative;
    background-color: red;
    width: 16%;
    top: -12vw;
    height: 16vw;
    right: -12%;
    float: right;
">
        <!-- 自己的头像 -->
    </div>

    <div style="
    height: 100%;
">
        <div style="
    height: 21vw;
    background-color: #f8f8f8;
">
    <!-- 有新消息 -->
        </div>
        <!-- 朋友圈的列表 -->

        <!-- 第一个朋友圈 -->
        <div style="
overflow: hidden;
">

            <div style="
                background-color: red;
                width: 10vw;
                height: 10vw;
                float: left;
                margin-left: 2vw;
        ">
                <!-- 对方的头像 -->
            </div>
            <div style="
                font-size: 4vw;
                color: #686aa2;
                margin-left: 15vw;
                margin-right: 10vw;
                font-weight: bold;
            ">
                别人的微信名
            </div>

            <div style="
                margin-left: 15vw;
                margin-right: 10vw;
            ">
                飞龙传送废了你飞龙传送废了你飞龙传送废了你飞龙传送废了你飞龙传送废了
            </div>
            <div style="
                margin-left: 14vw;
                overflow:hidden;
            ">
                <!--  -->
                <ul  class="uploaderFiles onclickbig">
                    <!-- 六张图的一张 -->
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                    <li class="picli" style="background-image: url('2.jpg');"></li>
                </ul>


            </div>
            <div style="
            margin-left: 16vw;
            line-height: 9vw;
            /* overflow: hidden; */
            margin-right: 4vw;
            margin-top: 1vw;
            margin-bottom: 10vw;
    ">
                <!-- 时间显示 -->
                <div style="
        color: #5b518e;
        float: left;
    ">
                    <!-- 时间显示 -->
                    22分钟前
                </div>
                <div style="
    float: right;
    background-color: #ececec;
    width: 10vw;
    height: 7vw;
    border-radius: 1.5vw;
    transform-origin: 0px 0px;
    opacity: 1;
    transform: scale(1, 1);
    font-size: 8vw;
    font-weight: bolder;
    text-align: center;
    line-height: 3vw;
    float: right;
" onclick="huifu(this,1);">..</div>
            </div>

            <!-- 回复点赞框 -->
            <div class="huifudianzakuang" style="
            margin-left: 14vw;
            margin-right: 4vw;
            background-color: #ececec;
            border-radius: 1.5vw;" data-index=1>


            </div>

        </div>

        <!-- 第二个朋友圈 -->
        <div style="
overflow: hidden;
">

            <div style="
                background-color: red;
                width: 10vw;
                height: 10vw;
                float: left;
                margin-left: 2vw;
        ">
                <!-- 对方的头像 -->
            </div>
            <div style="
                font-size: 4vw;
                color: #686aa2;
                margin-left: 15vw;
                margin-right: 10vw;
                font-weight: bold;
            ">
                别人的微信名
            </div>

            <div style="
                margin-left: 15vw;
                margin-right: 10vw;
            ">
                飞龙传送废了你飞龙传送废了你飞龙传送废了你飞龙传送废了你飞龙传送废了
            </div>
            <div style="
                margin-left: 14vw;
                overflow:hidden;
            ">
                <!--  -->
                <ul class="uploaderFiles onclickbig">
                    <li class="picli" style="background-image: url('1.jpg');"></li>
                </ul>




            </div>
            <div style="
            margin-left: 16vw;
            line-height: 9vw;
            /* overflow: hidden; */
            margin-right: 4vw;
            margin-top: 1vw;
            margin-bottom: 10vw;
    ">
                <!-- 时间显示 -->
                <div style="
        color: #5b518e;
        float: left;
    ">
                    <!-- 时间显示 -->
                    22分钟前
                </div>
                <div style="
    float: right;
    background-color: #ececec;
    width: 10vw;
    height: 7vw;
    border-radius: 1.5vw;
    transform-origin: 0px 0px;
    opacity: 1;
    transform: scale(1, 1);
    font-size: 8vw;
    font-weight: bolder;
    text-align: center;
    line-height: 3vw;
    float: right;
" onclick="huifu(this,1);">..</div>
            </div>

            <!-- 回复点赞框 -->
            <div class="huifudianzakuang" style="
            margin-left: 14vw;
            margin-right: 4vw;
            background-color: #ececec;
            border-radius: 1.5vw;" data-index=1>


            </div>

        </div>




    </div>








    <!-- 图片放大的功能html -->
    <div class="weui-gallery" id="gallery">
        <span class="weui-gallery__img" id="galleryImg"></span>
        <div class="weui-gallery__opr" id="delthisimg">
            <!-- <a href="javascript:" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i> 不需要删除功能
            </a> -->
        </div>
    </div>








    <!-- 零散的html片段 -->
    <div id="lingsanhtmlpianduan" style="
display: none;
">


        <!-- 点赞 -->
        <p class="donothide" style="
        border-bottom: 1px #dcdce0 solid;
        padding-left: 2vw;
        padding-top: 2vw;
        padding-right: 2vw;
        padding-bottom: 1vw;
        color: #686aa2;
        font-weight: 800;
        ">❤<span style="display: none;">温温</span><span></span></p>

        <!-- 不回复别人的时候的朋友圈评论 -->
        <p style="
    padding-left: 2vw;
    padding-top: 2vw;
    padding-right: 2vw;
    padding-bottom: 1vw;
    " onclick="pinlun2(this);"><span style="
    color: #686aa2;
    font-weight: 800;
    ">别人</span><span style="
    color: #686aa2;
    font-weight: 800;
    ">: </span>
    <span>哈哈哈</span>
    <span class= "shanchu" style="float: right;">删除</span>
</p>
        <!-- 回复别人的时候的朋友圈评论 -->
        <p style="
    padding-left: 2vw;
    padding-top: 2vw;
    padding-right: 2vw;
    padding-bottom: 1vw;
    " onclick="pinlun2(this);">
            <span style="
    color: #686aa2;
    font-weight: 800;
    ">A</span>
            回复
            <span style="
    color: #686aa2;
    font-weight: 800;
    ">B</span>
            <span style="
    color: #686aa2;
    font-weight: 800;
    ">: </span>
    <span>哈哈哈</span>
    <span class= "shanchu" style="float: right;">删除</span>
        </p>

    
    
        <!-- 新消息 -->
        <div id="youxinxiaoxi" style="
        top: 6vw;
        left: 35vw;
        position: relative;
        background-color: #cccccc;
        width: 27vw;
        height: 7vw;
        border-radius: 1.5vw;
        transform-origin: 0px 0px;
        opacity: 1;
        transform: scale(1, 1);
        font-size: 4vw;
        font-weight: bolder;
        text-align: center;
        line-height: 7vw;
    " onclick="tiaozhuandaomiaodian(1);" class="">有新消息</div>


    </div>









    <!-- 那个评论框 -->

    <div id="textareadiv" class="donothide" style="
    display: none;
    width: 100%;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    background-color: rgb(246 246 246);
    min-height: 10vw;
    position: fixed;
    bottom: 0vw;
">
        <div id="textareainput" contenteditable="true" class="donothide textarea"></div>
        <div id="fasong" class="donothide" onclick="fasongpinlun();" style=" 
        color: #9c9c9c; 
        background-color: whitesmoke; 
        border-radius: 1.5vw; 
        width: 16vw; 
        text-align: center; 
        line-height: 2em; 
        position: absolute; 
        right: 2vw; 
        bottom: 2.8vw;
        border: 2px solid #bfbfbf;
        transition: background-color 150ms ease-in-out 10ms;
        
    ">发送</div>
    </div>







    <!-- 那个回复按钮 -->


    <div id="huifuanniu" style="display: none; 
            right: 11vw;
            font-size: 3vw;
            bottom: 5vw;
            float: right;
            background-color: rgb(76, 76, 76);
            width: 47vw;
            height: 10vw;
            position: relative;
            border-radius: 1.5vw;
            transform-origin: 0px 0px;
            opacity: 1;
            transform: scale(1, 1);
        ">
        <div id="zandiv" class="anniu" style="
display: none;
color: white;
width: 30%;
padding-left: 6vw;
float: left;

height: 100%;
border-radius: 1.5vw;
" onclick="zan(this);"><img src="l.png" style="
width: 5.5vw;
position: relative;
/* height: 100%; */
left: -1vw;
top: 2vw;
">赞</div>

<div id="quxiaodiv"  class="anniu" style="
display: none;
color: white;
width: 30%;
padding-left: 6vw;
float: left;
height: 100%;
border-radius: 1.5vw;
" onclick="delzanajax(this);"><img src="l.png" style="
width: 5.5vw;
position: relative;
left: -1vw;
top: 2vw;
">取消</div>
        <div class="anniu" style="
color: white;
width: 30%;
padding-left: 6vw;
float: left;
height: 100%;
" onclick="pinlun(this);"><img src="liuyan.png" style="
width: 5.5vw;
position: relative;
/* height: 100%; */
left: -1vw;
top: 2vw;
">评论</div>

    </div>




</body>
<script>

    // 前端异常收集
    // window.onerror = handleError;

    var baseUrl = "testapi";

    var caozuorenmingzi = "wenwen"; // 现在的用户名

    var huifuren = "";

    var pinluntype = null;


    var miaodian = null;
    var huifukuang = null;

    var textarea = document.getElementById("textareainput");
    var textareadiv = document.getElementById("textareadiv");
    var fasongdiv = document.getElementById("fasong");

    var now = 0;  //评论框处理

    var canSend = false;

    var huifudiv = null; // 点击的是哪个朋友圈列表

    var fapengyouquanhtml = "fapengyouquan.html";

    var pinlunhtml = "/pinlun.html";

    var zanhtml = "/zan.html";

    var shoudaohuifuhtml = "/shoudaohuifu.html";

    var geterrordatahtml = "/geterrordata.html";

    // 处理评论框



    textarea.addEventListener('input', function (e) {




        var subject = textarea.innerText;

        if (subject.length > 0) {
            $(fasongdiv).css("background-color", "#1aad19");
            $(fasongdiv).css("color", "#f8f8f8");
            canSend = true;
        } else {
            $(fasongdiv).css("background-color", "whitesmoke");
            $(fasongdiv).css("color", "#9c9c9c");
            canSend = false;
        }

    })




    function huifu(that, num) {

        miaodian = that;

        // 它的父亲下一个就是回复的框
        huifukuang = $(that).parent().next();

        huifuanniu = $("#huifuanniu");
        $(that).append(huifuanniu);

        // 判断是否有赞 切换按钮
        if(viewzan(huifukuang)){
            $("#zandiv").hide();
            $("#quxiaodiv").show();
        }else{

            $("#zandiv").show();
            $("#quxiaodiv").hide();
        }

        huifuanniu.toggle();

    }


    // 从弹窗里面进入的评论
    function pinlun() {
        pinluntype = 1;


        $(textareadiv).show();
        $(textarea).focus();

        miaodian.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });

    }

    // 回复别人的评论
    function pinlun2(that, num) {

        pinluntype = 2;
        miaodian = that;

        huifukuang = $(that).parent();

        huifuren = $(that).children()[0].innerText;

        $(textareadiv).show();
        $(textarea).focus();

        miaodian.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
    }

    document.addEventListener("touchstart", function (e) {
        if ($(e.target).hasClass("donothide")) {
            // console.log(e.target);
        } else {
            $(textareadiv).hide();
        }
    });


    // 发送评论，这里涉及到前端修改，和后端交互
    function fasongpinlun() {

        var subject = textarea.innerText;
        var adata = {};
        var newdom = null;
        adata.replyid = (huifukuang).data("index");

        if (pinluntype == 1) {

            adata.name = caozuorenmingzi;

            adata.saytext = subject;

            newdom = createAhuifuhtml(adata);

            $(huifukuang).append(newdom);
        } else if (pinluntype == 2) {

            adata.name = caozuorenmingzi;

            adata.replayname = huifuren;

            adata.saytext = subject;

            newdom = createAhuifuhtml2(adata);

            $(huifukuang).append(newdom);
        } else {
            console.log("不知道怎么回复");
        }

        // 发送给服务器
        gotoajax(adata,newdom);
        textarea.value = "";
        $(textareadiv).hide();

    }

    // 拼接回复html

    function createAhuifuhtml(adata) {
        var newdom = null;

        var name = adata.name;
        var saytext = adata.saytext;
        $("#lingsanhtmlpianduan > p:nth-child(2) > span:nth-child(1)").text(name);

        $("#lingsanhtmlpianduan > p:nth-child(2) > span:nth-child(3)").text(saytext);

        newdom = $("#lingsanhtmlpianduan > p:nth-child(2)").clone();

        return newdom;
    }

    function createAhuifuhtml2(adata) {
        var newdom = null;

        var name = adata.name;
        var replayname = adata.replayname;
        var saytext = adata.saytext;
        $("#lingsanhtmlpianduan > p:nth-child(3) > span:nth-child(1)").text(name);

        $("#lingsanhtmlpianduan > p:nth-child(3) > span:nth-child(2)").text(replayname);

        $("#lingsanhtmlpianduan > p:nth-child(3) > span:nth-child(4)").text(saytext);

        newdom = $("#lingsanhtmlpianduan > p:nth-child(3)").clone();

        return newdom;
    }


    // 添加赞
    function zan(that) {
        var newdom = null;

        // 判断有没有赞这个P 进行的操作
        if ($(huifukuang).children("p").hasClass("donothide")) {
            $(huifukuang).children("p").children("span").show();
        } else {
            newdom = $("#lingsanhtmlpianduan > p:nth-child(1)").clone();
            newdom.children("span").show();
            $(huifukuang).prepend(newdom);
        }

        var adata = {};
        adata.huifukuangid = $(huifukuang).data("index");
        adata.zan = true;
        adata.name = caozuorenmingzi;
        zantoajax(adata,newdom);

    }

    // 发朋友圈
    function fapengyouquan(that, num) {
        window.location.href = fapengyouquanhtml;
    }

    // 评论发送给服务器
    function gotoajax(adata,newdom) {
        var posturl = baseUrl + pinlunhtml;
        $.ajax({
            url: posturl,
            type: "POST",
            data: JSON.stringify(adata),
            dataType: "json",
            success: function (res) {
                if(res.status){
                    // 为dom绑定上回复id
                    newdom.data("index",res.id);
                }

            }
        });
    }

    // 赞发送给服务器
    function zantoajax(adata,newdom) {
        var posturl = baseUrl + zanhtml;
        $.ajax({
            url: posturl,
            type: "POST",
            data: JSON.stringify(adata),
            dataType: "json",
            success: function (res) {
                if(res.status){
                    // 为dom绑定上回复id
                    if(newdom){
                        newdom.data("index",res.id);
                    }
                    
                }

            }
        });
    }


    // 思路是后端给个index,然后找到这个index节点，飞过去
    function tiaozhuandaomiaodian(num){
        miaodian.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
    }

    // 收到回复就显示出来
    $(function() { 
        shoudaohuifu();
    });

    function shoudaohuifu(){
        var posturl = baseUrl + shoudaohuifuhtml;
        $.ajax({
            url: posturl,
            type: "GET",
            dataType: "json",
            success: function (res) {
                if(res.status){
                    // 确实有新消息就把它移动到那里
                    youxinxiaoxi = $("#youxinxiaoxi");
                    $("body > div:nth-child(5) > div:nth-child(1)").append(youxinxiaoxi);
                }

            },
            error: function () {
                console.log("error");

            }
        });
    }

    // del赞
    function delzanajax(that){

        if ($(huifukuang).children("p").hasClass("donothide")) {
            // 如果除了自己以外就没有赞了，那就删除这个p 
            // 判断第二个span的文字是否是空
            if($(huifukuang).children("p").eq(0).children("span").eq(1).html() == ""){
                $(huifukuang).children("p").eq(0).remove();
            }else{
                $(huifukuang).children("p").children("span").hide();
            }
            
        }


        var adata = {};
        adata.huifukuangid = $(huifukuang).data("index");
        adata.zan = false;
        adata.name = caozuorenmingzi;
        zantoajax(adata,"");

    }

    // 判断页面上自己是否有赞
    function viewzan(huifukuang){
        if ($(huifukuang).children("p").hasClass("donothide")) {

            if($(huifukuang).children("p").eq(0).children("span").eq(0).css("display") == "none"){
                
            }else{
                return true;
            }
            
        }        
        return false;
    }


    function handleError(msg,url,l)
    {
        try{
            　　var adata = {};
                adata.msg = msg;
                adata.url = url;
                adata.l = l;
            
                var posturl = baseUrl + geterrordatahtml;
                $.ajax({
                        url: posturl,
                        type: "POST",
                        data: JSON.stringify(adata),
                        dataType: "json",
                        success: function (res) {

                        }
                    });

        } catch(ex){ }
    } 

    // 图片点击放大的功能
    $(function(){
        $gallery = $("#gallery"), 
        $galleryImg = $("#galleryImg"),
        $uploaderFiles = $(".onclickbig");

        $uploaderFiles.on("click", "li", function(){
            // 设置选择的index
            select_index_dom = this;
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.show();
            $gallery.removeClass("weui-animate-fade-out").addClass("weui-animate-fade-in");
        });
        $gallery.on("click", function(){
            $gallery.hide();
            $gallery.removeClass("weui-animate-fade-in").addClass("weui-animate-fade-out");
        });
    });

</script>

</html>